<?xml version="1.0" encoding="UTF-8" ?>
 
<xsl:stylesheet version="1.0" 
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
        xmlns="http://www.w3.org/1999/xhtml">
    <xsl:output method="xml" indent="no"
        doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" 
        doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>

<xsl:template name="reportGraph">
    <xsl:choose>
        <xsl:when test="(/root/dojo) = 1">
            <xsl:call-template name="reportGraphDojo"/>
        </xsl:when>
        <xsl:otherwise>
            <xsl:call-template name="reportGraphTable"/>
        </xsl:otherwise>
    </xsl:choose>
</xsl:template>


<xsl:template name="reportGraphTable">
    <table class="reportGraph">
        <xsl:apply-templates select="graph_row"/>
    </table>
    <table class="reportGraphLegend">
        <xsl:apply-templates select="legend_row"/>
    </table>
</xsl:template>

<xsl:template match="graph_row[@day='off']">
    <tr class="dayOff">
        <th>
            <xsl:apply-templates select="row_label"/>
        </th>
        <td>
            <div class="relative"><xsl:apply-templates select="row_item"/>&#160;</div>
        </td>
    </tr>
</xsl:template>

<xsl:template match="graph_row">
    <tr>
        <th>
            <xsl:apply-templates select="row_label"/>
        </th>
        <td>
            <div class="relative"><xsl:apply-templates select="row_item"/>&#160;</div>
        </td>
    </tr>
</xsl:template>

<xsl:template match="row_item">
    <div class="rowItem" style="background-color: {@color}; width: {@width}" title="{@value}"></div>
</xsl:template>

<xsl:template match="legend_row">
    <tr><td id="color" style="background-color: {@color};"></td><td id="name"><xsl:value-of select="@name"/></td></tr>
</xsl:template>



<xsl:template name="reportGraphDojo">
    <table align="center" border="0" style="width: 70%;"><tr><td>
    <div id="chart" style="width: 100%; height: 360px;"></div>
    </td></tr>
    <tr><td align="center">
    <div id="legend"></div>
    </td></tr></table>
    
    <script type="text/javascript">
        <xsl:call-template name="reportGraphDojoLabels"/>
<![CDATA[
require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Lines", "dojox/charting/widget/Legend", "dojox/charting/action2d/Tooltip"]);

var chart = new dojox.charting.Chart("chart");
chart.addPlot("default", {type: "Lines", markers: true, tension: "S"});
chart.addAxis("x", {majorTickStep: 1, minorTicks: false, min: min, max: max, labels: labels, rotation:-90});
chart.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0});
]]>
<xsl:call-template name="reportGraphDojoSeries"/>
<![CDATA[
var tip = new dojox.charting.action2d.Tooltip(chart, "default");
chart.render();
var legend = new dojox.charting.widget.Legend({chart: chart}, "legend");
]]>
    </script>
</xsl:template>

<xsl:template name="reportGraphDojoLabels">
    <xsl:text>var labels=[</xsl:text>
    <xsl:for-each select="//graph_row">
        <xsl:text>{value:</xsl:text><xsl:value-of select="position()"/><xsl:text>, text: "</xsl:text><xsl:value-of select="row_label"/><xsl:text>"}</xsl:text>
        <xsl:if test="not(position() = last())">
            <xsl:text>,</xsl:text>
        </xsl:if>
    </xsl:for-each>
    <xsl:text>];</xsl:text>
    
    <xsl:text>var min = 1;</xsl:text>
    <xsl:text>var max = </xsl:text>
    <xsl:value-of select="count(//graph_row)"/>
    <xsl:text>;</xsl:text>
</xsl:template>

<xsl:template name="reportGraphDojoSeries">
    <xsl:for-each select="//legend_row">
        <xsl:text>chart.addSeries("</xsl:text><xsl:value-of select="@name"/><xsl:text>", [</xsl:text>
    
        <xsl:variable name="color" select="@color"/>
        <xsl:for-each select="//graph_row/row_item[@color = $color]">
            <xsl:text>{x: </xsl:text>
            <xsl:value-of select="position()"/>
            <xsl:text>, y:</xsl:text>
            <xsl:value-of select="@value"/>
            <xsl:text>}</xsl:text>
            <xsl:if test="not(position() = last())">
                <xsl:text>,</xsl:text>
            </xsl:if>
        </xsl:for-each>
    
        <xsl:text>], {stroke:"</xsl:text><xsl:value-of select="@color"/><xsl:text>", fill:"</xsl:text><xsl:value-of select="@color"/><xsl:text>", legend: "</xsl:text><xsl:value-of select="@name"/><xsl:text>"});</xsl:text>
    </xsl:for-each>
</xsl:template>


</xsl:stylesheet>